<template>
  <div class="box line">
    <h4 class="caption">会议时长（周）</h4>
    <div class="chart" ref="line"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// 引入echart插件  按需加载的
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
export default {
  data() {
    return {
      option:{}
    }
  },
  mounted() {
   this.show()
  },
  methods: {
    show(){
      var lineChart=echarts.init(this.$refs.line)
      lineChart.setOption({
            xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        show:true
    },
    yAxis: {
        type: 'value',
        show: true
    },
    color:'#5470C6',
    series: [{
        data: [1, 2, 3, 4, 1, 2, 3],
        type: 'line',
        areaStyle: {}
    }]
      })
  },
  }
}
</script>

<style lang="scss" scoped>
.chart{
  width: 725px;
  height: 250px;
}
.line {
  width: 755px;
  height: 300px;
}
.box {
  border-radius: 20px;
  box-shadow: 4px 3px 7px 0px #00000036;
  letter-spacing: 5px;
  .caption {
    margin:5px 15px;
    font-size: 25px;
    font-weight: normal;
    color: #5E5E5E;
  }
}
</style>